<template>
    <div class="body">
        <!-- 输入短信 -->
        <div class="loginsingup-input" v-show="isShow">
            <form method="post" style="padding: 0 1rem">
                <div class="reset-pwd-title">短信修改支付密码</div>
                <div class="lsu">
                    <span class="ico ico-telephone"></span>
                    <input
                        type="tel"
                        name="mobile"
                        id="tel"
                        value=""
                        v-model="mobile"
                        disabled
                        placeholder="请输入您的手机号"
                    />
                </div>
                <div
                    class="v-identity m-t-40"
                    style="
                        display: {
                            $sms['regis_sms_enable']==1?'block': 'none';
                        }
                    "
                >
                    <span class="v-til">验证码 :</span>
                    <div class="v-cont-wrap">
                        <input
                            type="text"
                            name="mobile_code"
                            id="tpcode"
                            v-model="Captchacode"
                            autocomplete="new-password"
                            placeholder="请输入验证码"
                        />
                        <a
                            class="m_phone"
                            rel="mobile"
                            @click="sendCaptchacode()"
                            id="fcode"
                            >{{ captchatext }}</a
                        >
                    </div>
                </div>
            </form>
            <div class="j_newbutton">
                <div class="j_newbtn" @click="nextSumit()">提交</div>
            </div>
        </div>
        <div class="loginsingup-input" v-show="!isShow">
            <form method="post" id="payform" style="padding: 0 1rem">
                <div class="lsu">
                    <span class="ico ico-password"></span>
                    <input
                        type="password"
                        name="new_password"
                        v-model="new_password"
                        placeholder="请输入新密码"
                        autocomplete="new-password"
                    />
                </div>
                <div class="lsu">
                    <span class="ico ico-password"></span>
                    <input
                        type="password"
                        name="confirm_password"
                        v-model="confirm_password"
                        autocomplete="new-password"
                        placeholder="再次输入新密码"
                    />
                </div>
            </form>
            <div class="j_newbutton">
                <div class="j_newbtn" @click="submitBtnfn()">确认修改</div>
            </div>
        </div>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            isShow: true,
            mobile: '',
            captchatext: '获取验证码',
            CaptchaData: {},
            Captchacode: '',

            new_password: '',
            confirm_password: '',
            session_id: '',
        };
    },
    computed: {},
    mounted() {
        if (this.getUserInfo()) {
            this.mobile = this.getUserInfo().mobile;
        }
    },
    methods: {
        // 提交修改
        submitBtnfn() {
            if (!this.new_password || !this.confirm_password) {
                return Toast({
                    message: '请输入密码',
                    duration: 2000,
                });
            }

            if (this.new_password != this.confirm_password) {
                return Toast({
                    message: '两次密码不一致',
                    duration: 2000,
                });
            }
            axiosPost(
                '/api/user/paypwd',
                {
                    new_password: this.new_password,
                    confirm_password: this.confirm_password,
                    session_id: this.session_id,
                },
                (res) => {
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    this.getUserinfoSession();
                    if (res.status != 1) {
                        return;
                    }
                    this.$router.go(-1);
                }
            );
        },
        getUserinfoSession() {
            axiosPost('/api/user/info', {}, (res) => {
                let userinfo = res.data.user;
                userinfo.token = this.getUserInfo().token;
                localStorage.setItem('userinfo', JSON.stringify(userinfo));
                // this.userInfo = res.data.user;
                // this.shop_info_phone = res.data.shop_info_phone;
                // this.first_leader_list = res.data.first_leader_list;
            });
        },
        // 下一步
        nextSumit() {
            if (!this.Captchacode) {
                return;
            }
            this.CaptchaData.mobile_code = this.Captchacode;
            axiosPost('/api/login/check_code', this.CaptchaData, (res) => {
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                this.session_id = res.data.session_id;
                this.isShow = false;
            });
        },
        // 倒计时相关
        daojishi() {
            this.captchacode = '';
            let code = 60;
            clearInterval(this.j_setInterval);
            this.captchatext = '重新发送' + code + 's';
            this.j_setInterval = setInterval(() => {
                code--;
                this.captchatext = '重新发送' + code + 's';
                if (code == 0) {
                    clearInterval(this.j_setInterval);
                    this.captchatext = '重新发送';
                    code = 60;
                }
            }, 1000);
        },
        // 获取验证码
        sendCaptchacode() {
            if (
                this.captchatext == '获取验证码' ||
                this.captchatext == '重新发送'
            ) {
                if (!this.mobile) {
                    return Toast({
                        message: '请输入手机号码',
                        duration: 2000,
                    });
                }
                axiosPost(
                    '/api/login/code',
                    {
                        type: 'phone',
                        scene: '6',
                        mobile: this.mobile.replace(/\s+/g, ''),
                    },
                    (res) => {
                        if (res.status != 1) {
                            return Toast({
                                message: res.msg,
                                duration: 2000,
                            });
                        }
                        Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                        this.CaptchaData = res.data;
                        this.daojishi();
                    }
                );
            } else {
                return;
            }
        },
    },
};
</script>

<style lang="less" scope></style>
